import { useUserStore } from '@/stores/user'

// 权限控制指令
export const permission = {
  mounted(el, binding) {
    const userStore = useUserStore()
    const { value } = binding
    
    // 如果没有指定角色，默认显示
    if (!value || !Array.isArray(value) || value.length === 0) {
      return
    }
    
    // 检查用户权限
    if (!userStore.hasAnyRole(value)) {
      // 隐藏元素
      el.style.display = 'none'
      // 或者移除元素
      // el.remove()
    }
  },
  
  updated(el, binding) {
    const userStore = useUserStore()
    const { value } = binding
    
    if (!value || !Array.isArray(value) || value.length === 0) {
      el.style.display = ''
      return
    }
    
    if (!userStore.hasAnyRole(value)) {
      el.style.display = 'none'
    } else {
      el.style.display = ''
    }
  }
}

// 角色检查指令
export const role = {
  mounted(el, binding) {
    const userStore = useUserStore()
    const { value } = binding
    
    if (!value) {
      return
    }
    
    // 支持单个角色或角色数组
    const roles = Array.isArray(value) ? value : [value]
    
    if (!userStore.hasAnyRole(roles)) {
      el.style.display = 'none'
    }
  },
  
  updated(el, binding) {
    const userStore = useUserStore()
    const { value } = binding
    
    if (!value) {
      el.style.display = ''
      return
    }
    
    const roles = Array.isArray(value) ? value : [value]
    
    if (!userStore.hasAnyRole(roles)) {
      el.style.display = 'none'
    } else {
      el.style.display = ''
    }
  }
}
